<template>
  <el-card style="height: calc(100vh - 100px)">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 分析  -->
      <el-tab-pane label="分析" name="first" class="analyse">
        <!-- 顶部数据展示 -->
        <el-row :gutter="24">
          <el-col :span="6" class="row">
            <el-card class="item">
              <div class="mr10">
                <img
                  class="img"
                  src="../../assets/images/Alarm_total.png"
                  alt=""
                />
              </div>
              <div class="ml10">
                <h3 class="total">告警总数</h3>
                <h3 style="color: #ff4e3a" class="num">
                  {{ AlertClassifyData.total }}
                </h3>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6" class="row">
            <el-card class="item">
              <div class="mr10">
                <img class="img" src="../../assets/images/already.png" alt="" />
              </div>
              <div class="ml10">
                <h3>已关闭告警数</h3>
                <h3 style="color: #358bfc" class="num">
                  {{ AlertClassifyData.value }}
                </h3>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6" class="row">
            <el-card class="item">
              <div class="mr10">
                <img
                  class="img"
                  src="../../assets/images/unconfirmed.png"
                  alt=""
                />
              </div>
              <div class="ml10">
                <h3>未关闭未确认告警数</h3>
                <h3 style="color: #d81e06" class="num">
                  {{ AlertClassifyData.unconfirmed }}
                </h3>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6" class="row">
            <el-card class="item">
              <div class="mr10">
                <img
                  class="img"
                  src="../../assets/images/not_close.png"
                  alt=""
                />
              </div>
              <div class="ml10">
                <h3>未关闭已确认告警数</h3>
                <h3 style="color: #fd6a00" class="num">
                  {{ AlertClassifyData.confirm }}
                </h3>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 中间内容 -->
        <div class="analyse_center">
          <el-card class="left">
            <div slot="header" class="clearfix">
              <span>告警级别分布</span>
            </div>
            <div id="main"></div>
          </el-card>
          <el-card class="right">
            <div slot="header" class="clearfix">
              <span>告警趋势</span>
            </div>
            <div id="main2"></div>
          </el-card>
        </div>

        <!-- 下面柱状图 -->
        <!-- <el-card class="analyse_bottom">
                    <div slot="header" class="clearfix">
                        <span>告警分类统计</span>
                    </div>
                    <div id="main3"></div>
                </el-card> -->
      </el-tab-pane>

      <!-- 日报  -->
      <el-tab-pane label="日报" name="second" class="day" id="exportPdf1">
        <div v-show="dayVislbie">
          <div class="functional_zone">
            <p>今日报表</p>
            <div>
              <el-button type="primary" @click="downPdf('exportPdf1', '日报')"
                >导出</el-button
              >
              <el-button @click="dayVislbie = false">历史日报</el-button>
            </div>
          </div>
          <!-- 日报顶部列表 -->
          <div class="day_top mt20">
            <!-- 左边告警统计 -->
            <el-card style="width: 49%">
              <div slot="header" class="clearfix">
                <span>告警统计</span>
              </div>
              <div class="ProgressBar">
                <div class="day_item">
                  <h3 class="total">告警总数</h3>
                  <h2 class="mt10 mb10">{{ reportDay.date.total }}</h2>
                  <el-progress :percentage="100" color="#13ce66"></el-progress>
                </div>
                <div class="day_item">
                  <h3 class="total">已确认告警</h3>
                  <h2 class="mt10 mb10">{{ reportDay.date.confirm }}</h2>
                  <el-progress
                    :percentage="
                      reportDay.date.total == 0
                        ? 0
                        : (
                            reportDay.date.confirm / reportDay.date.total
                          ).toFixed(2) * 100
                    "
                  ></el-progress>
                </div>
                <div class="day_item">
                  <h3 class="total">未确认告警</h3>
                  <h2 class="mt10 mb10">{{ reportDay.date.unConfirm }}</h2>
                  <el-progress
                    :percentage="
                      reportDay.date.total == 0
                        ? 0
                        : (
                            reportDay.date.unConfirm / reportDay.date.total
                          ).toFixed(2) * 100
                    "
                    color="#fac95c"
                  ></el-progress>
                </div>
              </div>
            </el-card>
            <!-- 右边告警级别分类统计 -->
            <el-card style="width: 49%">
              <div slot="header" class="clearfix">
                <span>对象告警TOP5</span>
              </div>
              <!-- <div class="type"
                                 id="main4">
                            </div> -->
              <div class="top10">
                <el-table
                  :data="alarmTop"
                  style="width: 100%"
                  size="mini"
                  border
                >
                  <el-table-column prop="no" label="编号" align="center">
                  </el-table-column>
                  <el-table-column prop="name" label="对象名称" align="center">
                  </el-table-column>
                  <el-table-column prop="ip" label="IP" align="center">
                  </el-table-column>
                  <el-table-column prop="count" label="告警次数" align="center">
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </div>

          <!-- 日报中部列表 -->
          <!-- <div class="day_cener mt20">
                        <el-card>
                            <div slot="header"
                                 class="clearfix">
                                <span>Top5</span>
                            </div>
                            <div class="top5">
                                <div style="width: 33%;">
                                    <p class="top_title">[操作系统]CPU使用率 Top5</p>
                                    <p>
                                        <span class="num">1</span>
                                        测试-产品补丁测试-1-157
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">2</span>
                                        ceph02
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">3</span>
                                        麒麟kylinV10适配测试-3-170
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">4</span>
                                        宝塔操作系统-(官方网站)
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">5</span>
                                        192.168.3.54
                                        <span class="percentage">99%</span>
                                    </p>
                                </div>
                                <div style="width: 33%;">
                                    <p class="top_title">[操作系统]CPU使用率 Top5</p>
                                    <p>
                                        <span class="num">1</span>
                                        测试-产品补丁测试-1-157
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">2</span>

                                        ceph02
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">3</span>
                                        麒麟kylinV10适配测试-3-170
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">4</span>
                                        宝塔操作系统-(官方网站)
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">5</span>
                                        192.168.3.54
                                        <span class="percentage">99%</span>
                                    </p>
                                </div>
                                <div style="width: 33%;">
                                    <p class="top_title">[操作系统]CPU使用率 Top5</p>
                                    <p>
                                        <span class="num">1</span>
                                        测试-产品补丁测试-1-157
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">2</span>

                                        ceph02
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">3</span>
                                        麒麟kylinV10适配测试-3-170
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">4</span>
                                        宝塔操作系统-(官方网站)
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">5</span>
                                        192.168.3.54
                                        <span class="percentage">99%</span>
                                    </p>
                                </div>
                                <div class="mt10"
                                     style="width: 33%;">
                                    <p class="top_title">[操作系统]CPU使用率 Top5</p>
                                    <p>
                                        <span class="num">1</span>
                                        测试-产品补丁测试-1-157
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">2</span>

                                        ceph02
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">3</span>
                                        麒麟kylinV10适配测试-3-170
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">4</span>
                                        宝塔操作系统-(官方网站)
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">5</span>
                                        192.168.3.54
                                        <span class="percentage">99%</span>
                                    </p>
                                </div>
                                <div class="mt10"
                                     style="width: 33%;">
                                    <p class="top_title">[操作系统]CPU使用率 Top5</p>
                                    <p>
                                        <span class="num">1</span>
                                        测试-产品补丁测试-1-157
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">2</span>

                                        ceph02
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">3</span>
                                        麒麟kylinV10适配测试-3-170
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">4</span>
                                        宝塔操作系统-(官方网站)
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">5</span>
                                        192.168.3.54
                                        <span class="percentage">99%</span>
                                    </p>
                                </div>
                                <div class="mt10"
                                     style="width: 33%;">
                                    <p class="top_title">[操作系统]CPU使用率 Top5</p>
                                    <p>
                                        <span class="num">1</span>
                                        测试-产品补丁测试-1-157
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">2</span>

                                        ceph02
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">3</span>
                                        麒麟kylinV10适配测试-3-170
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">4</span>
                                        宝塔操作系统-(官方网站)
                                        <span class="percentage">99%</span>
                                    </p>
                                    <p>
                                        <span class="num">5</span>
                                        192.168.3.54
                                        <span class="percentage">99%</span>
                                    </p>
                                </div>
                            </div>
                        </el-card>
                    </div> -->

          <!-- 日报底部列表 -->
          <div class="day_bottom mt20">
            <el-card>
              <div slot="header" class="clearfix">
                <span>触发器告警TOP10</span>
              </div>
              <div class="top10">
                <el-table :data="topDay" style="width: 100%" size="mini" border>
                  <el-table-column prop="no" label="编号" align="center">
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="触发器内容"
                    width="500"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="triggerDescription"
                    label="对象名称"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column prop="priority" label="级别" align="center">
                    <template slot-scope="{ row: { priority } }">
                      <el-tag v-if="+priority === 0">未分类</el-tag>
                      <el-tag type="success" v-else-if="+priority === 1"
                        >信息</el-tag
                      >
                      <el-tag type="warning" v-else-if="+priority === 2"
                        >警告</el-tag
                      >
                      <el-tag type="danger" v-else-if="+priority === 3"
                        >一般严重</el-tag
                      >
                      <el-tag type="danger" v-else-if="+priority === 4"
                        >严重</el-tag
                      >
                      <el-tag type="danger" v-else-if="+priority === 5"
                        >灾难</el-tag
                      >
                      <el-tag type="danger" v-else>未知</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="count" label="次数" align="center">
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </div>
        </div>
        <div v-show="!dayVislbie">
          <!-- 功能区 -->
          <div class="functional_zone">
            <div class="block">
              <el-date-picker
                size="mini"
                class="mr10"
                v-model="dateRange"
                style="width: 240px"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              ></el-date-picker>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="search()"
                >搜索</el-button
              >
              <el-button
                icon="el-icon-refresh"
                type="warning"
                size="mini"
                @click="resetQuery(1)"
                >重置</el-button
              >
            </div>
            <div>
              <el-button @click="dayVislbie = true">今日报表</el-button>
            </div>
          </div>
          <el-table
            class="mt20"
            :data="historyData"
            style="width: 100%"
            size="mini"
            border
          >
            <el-table-column prop="zbEventName" label="名称" align="center">
            </el-table-column>
            <el-table-column
              prop="zbEventBeginTime"
              label="开始时间"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="zbEventEndTime"
              label="结束时间"
              align="center"
            >
            </el-table-column>
            <el-table-column label="操作" align="center" width="100">
              <template slot-scope="scope">
                <el-button
                  @click="dayhandle(scope.row)"
                  type="text"
                  size="small"
                  >选择</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 周报  -->
      <el-tab-pane label="周报" name="third" class="week" id="exportPdf2">
        <div v-show="weekVislbie">
          <div class="functional_zone">
            <p>本周报表</p>
            <div>
              <el-button type="primary" @click="downPdf('exportPdf2', '周报')"
                >导出</el-button
              >
              <el-button @click="weekVislbie = false">历史周报</el-button>
            </div>
          </div>
          <!-- 周报头部 -->
          <div class="week_top mt20">
            <el-card style="width: 49%">
              <div slot="header" class="clearfix">
                <span>告警统计</span>
              </div>
              <div id="main5"></div>
            </el-card>
            <el-card style="width: 49%">
              <div slot="header" class="clearfix">
                <span> 对象告警TOP5</span>
              </div>
              <!-- <div id="main6"></div> -->
              <el-card>
                <div slot="header" class="clearfix">
                  <!-- <span>对象告警TOP10</span> -->
                </div>
                <div class="top10">
                  <el-table
                    :data="alarmTop"
                    style="width: 100%"
                    size="mini"
                    border
                  >
                    <el-table-column prop="no" label="编号" align="center">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="对象名称"
                      align="center"
                    >
                    </el-table-column>
                    <el-table-column prop="ip" label="IP" align="center">
                    </el-table-column>
                    <el-table-column
                      prop="count"
                      label="告警次数"
                      align="center"
                    >
                    </el-table-column>
                  </el-table>
                </div>
              </el-card>
            </el-card>
          </div>
          <!-- 周报中间 -->
          <div class="week_center mt20 mb20"></div>
          <!-- 周报底部 -->
          <div class="week_bottom">
            <el-card>
              <div slot="header" class="clearfix">
                <span>触发器告警TOP10</span>
              </div>
              <div class="top10">
                <el-table
                  :data="topWeek"
                  style="width: 100%"
                  border
                  size="mini"
                >
                  <el-table-column prop="no" label="编号" align="center">
                  </el-table-column>
                  <el-table-column
                    prop="triggerDescription"
                    label="触发器内容"
                    width="500"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column prop="name" label="对象名称" align="center">
                  </el-table-column>
                  <el-table-column prop="priority" label="级别" align="center">
                    <template slot-scope="{ row: { priority } }">
                      <el-tag v-if="+priority === 0">未分类</el-tag>
                      <el-tag type="success" v-else-if="+priority === 1"
                        >信息</el-tag
                      >
                      <el-tag type="warning" v-else-if="+priority === 2"
                        >警告</el-tag
                      >
                      <el-tag type="danger" v-else-if="+priority === 3"
                        >一般严重</el-tag
                      >
                      <el-tag type="danger" v-else-if="+priority === 4"
                        >严重</el-tag
                      >
                      <el-tag type="danger" v-else-if="+priority === 5"
                        >灾难</el-tag
                      >
                      <el-tag type="danger" v-else>未知</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="count" label="次数" align="center">
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </div>
        </div>
        <div v-show="!weekVislbie">
          <!-- 功能区 -->
          <div class="functional_zone">
            <div class="block">
              <el-date-picker
                size="mini"
                class="mr10"
                v-model="dateRange"
                style="width: 240px"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              ></el-date-picker>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="search()"
                >搜索</el-button
              >
              <el-button
                icon="el-icon-refresh"
                type="warning"
                size="mini"
                @click="resetQuery(2)"
                >重置</el-button
              >
            </div>
            <div>
              <el-button @click="weekVislbie = true">本周报表</el-button>
            </div>
          </div>
          <el-table
            class="mt20"
            :data="historyData"
            style="width: 100%"
            size="mini"
            border
          >
            <el-table-column prop="zbEventName" label="名称" align="center">
            </el-table-column>
            <el-table-column
              prop="zbEventBeginTime"
              label="开始时间"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="zbEventEndTime"
              label="结束时间"
              align="center"
            >
            </el-table-column>
            <el-table-column label="操作" align="center" width="100">
              <template slot-scope="scope">
                <el-button
                  @click="weekhandle(scope.row)"
                  type="text"
                  size="small"
                  >选择</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 月报  -->
      <el-tab-pane label="月报" name="fourth" class="month" id="exportPdf3">
        <div v-show="monthVislbie">
          <div class="functional_zone">
            <p>本月报表</p>
            <div>
              <el-button type="primary" @click="downPdf('exportPdf3', '月报')"
                >导出</el-button
              >
              <el-button @click="monthVislbie = false">历史月报</el-button>
            </div>
          </div>
          <!-- 月报头部 -->
          <div class="month_top mt20">
            <el-card style="width: 49%">
              <div slot="header" class="clearfix">
                <span>告警统计</span>
              </div>
              <div id="main7">
                <div class="ProgressBar">
                  <div class="day_item">
                    <h3 class="total">告警总数</h3>
                    <h2 class="mt10 mb10">{{ reportMonth.month.total }}</h2>
                    <el-progress
                      :percentage="100"
                      color="#13ce66"
                    ></el-progress>
                  </div>
                  <div class="day_item">
                    <h3 class="total">已确认告警</h3>
                    <h2 class="mt10 mb10">{{ reportMonth.month.confirm }}</h2>
                    <el-progress
                      :percentage="
                        reportMonth.month.total == 0
                          ? 0
                          : (
                              reportMonth.month.confirm /
                              reportMonth.month.total
                            ).toFixed(2) * 100
                      "
                    ></el-progress>
                  </div>
                  <div class="day_item">
                    <h3 class="total">未确认告警</h3>
                    <h2 class="mt10 mb10">{{ reportMonth.month.unConfirm }}</h2>
                    <el-progress
                      :percentage="
                        reportMonth.month.total == 0
                          ? 0
                          : (
                              reportMonth.month.unConfirm /
                              reportMonth.month.total
                            ).toFixed(2) * 100
                      "
                      color="#fac95c"
                    ></el-progress>
                  </div>
                </div>
              </div>
            </el-card>
            <el-card style="width: 49%">
              <div slot="header" class="clearfix">
                <span> 对象告警TOP5</span>
              </div>
              <!-- <div id="main8"></div> -->
              <div class="top10">
                <el-table
                  :data="alarmTop"
                  style="width: 100%"
                  size="mini"
                  border
                >
                  <el-table-column prop="no" label="编号" align="center">
                  </el-table-column>
                  <el-table-column prop="name" label="对象名称" align="center">
                  </el-table-column>
                  <el-table-column prop="ip" label="IP" align="center">
                  </el-table-column>
                  <el-table-column prop="count" label="告警次数" align="center">
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </div>
          <!-- 月报中部 -->
          <!-- <div class="month_center mt20 mb20">
                        <el-card>
                            <div slot="header"
                                 class="clearfix">
                                <span>对象告警TOP10</span>
                            </div>
                            <div class="top10">
                                <el-table :data="alarmTop"
                                          style="width: 100%"
                                          size="mini"
                                          border>
                                    <el-table-column prop="no"
                                                     label="编号"
                                                     align="center">
                                    </el-table-column>
                                    <el-table-column prop="name"
                                                     label="对象名称"
                                                     align="center">
                                    </el-table-column>
                                    <el-table-column prop="ip"
                                                     label="IP"
                                                     align="center">
                                    </el-table-column>
                                    <el-table-column prop="count"
                                                     label="告警次数"
                                                     align="center">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-card>
                    </div> -->
          <!-- 月报底部 -->
          <div class="month_bottom">
            <el-card>
              <div slot="header" class="clearfix">
                <span>触发器告警TOP10</span>
              </div>
              <div class="top10">
                <el-table
                  :data="topMonth"
                  style="width: 100%"
                  border
                  size="mini"
                >
                  <el-table-column prop="no" label="编号" align="center">
                  </el-table-column>
                  <el-table-column
                    prop="triggerDescription"
                    label="触发器内容"
                    width="500"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column prop="name" label="对象名称" align="center">
                  </el-table-column>
                  <el-table-column prop="priority" label="级别" align="center">
                    <template slot-scope="{ row: { priority } }">
                      <el-tag v-if="+priority === 0">未分类</el-tag>
                      <el-tag type="success" v-else-if="+priority === 1"
                        >信息</el-tag
                      >
                      <el-tag type="warning" v-else-if="+priority === 2"
                        >警告</el-tag
                      >
                      <el-tag type="danger" v-else-if="+priority === 3"
                        >一般严重</el-tag
                      >
                      <el-tag type="danger" v-else-if="+priority === 4"
                        >严重</el-tag
                      >
                      <el-tag type="danger" v-else-if="+priority === 5"
                        >灾难</el-tag
                      >
                      <el-tag type="danger" v-else>未知</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="count" label="次数" align="center">
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </div>
        </div>
        <div v-show="!monthVislbie">
          <!-- 功能区 -->
          <div class="functional_zone">
            <div class="block">
              <el-date-picker
                size="mini"
                class="mr10"
                v-model="dateRange"
                style="width: 240px"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              ></el-date-picker>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="search()"
                >搜索</el-button
              >
              <el-button
                icon="el-icon-refresh"
                type="warning"
                size="mini"
                @click="resetQuery(3)"
                >重置</el-button
              >
            </div>
            <div>
              <el-button @click="monthVislbie = true">本月报表</el-button>
            </div>
          </div>
          <el-table
            class="mt20"
            :data="historyData"
            style="width: 100%"
            size="mini"
            border
          >
            <el-table-column prop="zbEventName" label="名称" align="center">
            </el-table-column>
            <el-table-column
              prop="zbEventBeginTime"
              label="开始时间"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="zbEventEndTime"
              label="结束时间"
              align="center"
            >
            </el-table-column>
            <el-table-column label="操作" align="center" width="100">
              <template slot-scope="scope">
                <el-button
                  @click="monthhandle(scope.row)"
                  type="text"
                  size="small"
                  >选择</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>
<script>
import {
  getAlertClassifyApi,
  getRankApi,
  getTrendApi,
  getDataPresentationDateApi,
  getTopApi,
  getAlarmTopApi,
  getEventApi,
  getHistoryDateApi,
} from "@/api/dataPresentation/statisticsTable";
//导出pdf
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
import * as echarts from "echarts";
export default {
  data() {
    return {
      // 日期范围
      dateRange: [],
      alarmTop: [],
      topDay: [],
      topWeek: [],
      topMonth: [],
      // 日报周报月报数据
      reportDay: {
        date: {
          total: 0,
          confirm: 0,
          unConfirm: 0,
        },
      },
      reportWeek: {},
      reportMonth: {
        month: {
          total: 12,
          confirm: 0,
          unConfirm: 12,
        },
      },
      reports: {},
      //日报周报月报参数
      flag: 0,
      //顶部数据
      AlertClassifyData: {},
      //告警级别分布数据
      RankData: {},
      //告警趋势
      TrendData: {},
      //历史报
      historyData: [],
      //日期快捷选择
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value: "",
      dayVislbie: true,
      weekVislbie: true,
      monthVislbie: true,
      data: [
        {
          id: "1",
          ip: "192.168.1.40",
          name: "192.168.1.40_5040_unknown",
          num: "55",
        },
        {
          id: "1",
          ip: "192.168.1.40",
          name: "192.168.1.40_5040_unknown",
          num: "55",
        },
        {
          id: "1",
          ip: "192.168.1.40",
          name: "192.168.1.40_5040_unknown",
          num: "55",
        },
        {
          id: "1",
          ip: "192.168.1.40",
          name: "192.168.1.40_5040_unknown",
          num: "55",
        },
        {
          id: "1",
          ip: "192.168.1.40",
          name: "192.168.1.40_5040_unknown",
          num: "55",
        },
        {
          id: "1",
          ip: "192.168.1.40",
          name: "192.168.1.40_5040_unknown",
          num: "55",
        },
      ],
      activeName: "first",
      searchQuery: {
        pageNum: "1",
        pageSize: "10",
        zbEventType: null,
      },
    };
  },
  created() {
    this.getList();
    this.getDataPresentationDate();
  },
  mounted() {},
  methods: {
    downPdf(node, title) {
      let _this = this;
      document.documentElement.scrollTop = 0;
      let canvas = document.createElement("canvas"); // 生成canvas上下文
      let context = canvas.getContext("2d");
      let _articleHtml = document.getElementById(node);
      let _w = _articleHtml.clientWidth; //获取需要导出pdf区域的宽度和高度
      let _h = _articleHtml.clientHeight;
      let scale = 3; //将画布宽&&高放大三倍，提高清晰度
      if (_w > _h) {
        _h = _w;
      }
      canvas.width = _w * scale;
      canvas.height = _h * scale;
      context.scale(scale, scale);
      let opts = {
        scale: 1,
        width: _w, //dom 原始宽度
        height: _h,
        canvas: canvas,
        useCORS: true, //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
      };
      // 以上部分都是为了强化清晰度的，放大canvas画布
      html2canvas(_articleHtml, opts).then((canvas) => {
        _this.createPdfAll(canvas, scale, title);
      });
    },
    //自定义宽高
    createPdfAll(canvas, scale, title) {
      let contentWidth = canvas.width / scale;
      let contentHeight = canvas.height / scale;
      let pdf = new jsPDF("", "pt", [contentWidth, contentHeight]); //自定义宽高
      let pageData = canvas.toDataURL("image/jpeg", 1.0); //转换图片为dataURL
      pdf.addImage(pageData, "JPEG", 0, 0, contentWidth, contentHeight); //添加图像到页面
      pdf.save(`${title}.pdf`);
    },

    async dayhandle(row, event, column) {
      const day = row;
      day.flag = 0;
      let res = await getHistoryDateApi(day);
      let { code, data } = res;
      if (code == 200) {
        this.reportDay = data;
      }
      if (this.dayVislbie == false) {
        this.dayVislbie = true;
      }
    },
    async weekhandle(row, event, column) {
      const week = row;
      week.flag = 1;
      let res = await getHistoryDateApi(week);
      let { code, data } = res;
      if (code == 200) {
        this.reportWeek = data;
        this.$nextTick(() => {
          this.initEchart_week();
        });
      }
      if (this.weekVislbie == false) {
        this.weekVislbie = true;
      }
    },
    async monthhandle(row, event, column) {
      const month = row;
      month.flag = 2;

      let res = await getHistoryDateApi(month);
      let { code, data } = res;
      if (code == 200) {
        this.reportMonth.month = data.date;
      }
      if (this.monthVislbie == false) {
        this.monthVislbie = true;
      }
    },
    async search() {
      let res = await getEventApi(
        this.addDateRange(this.searchQuery, this.dateRange)
      );
      let { code, rows } = res;
      if (code == 200) {
        this.historyData = rows;
      }
    },
    resetQuery(id) {
      this.dateRange = [];
      (this.searchQuery = {
        pageNum: "1",
        pageSize: "10",
        zbEventType: id,
      }),
        this.search();
    },
    //选项卡切换
    handleClick(tab, event) {
      // console.log(tab, event);
      this.$nextTick(() => {
        if (this.activeName == "first") {
          this.initEchart_analyse();
        } else if (this.activeName == "second") {
          this.flag = 0;
          this.searchQuery.zbEventType = 1;
          this.search();
          this.getTop();
          this.getDataPresentationDate();
          this.initEchart_day();
        } else if (this.activeName == "third") {
          this.flag = 1;
          this.searchQuery.zbEventType = 2;
          this.search();

          this.getTop();
          this.getAlarmTop();
          this.getDataPresentationDate();
        } else if (this.activeName == "fourth") {
          this.flag = 2;
          this.searchQuery.zbEventType = 3;
          this.search();

          this.getTop();
          this.getAlarmTop();
          this.getDataPresentationDate();
        }
      });
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return M + D;
    },
    //分析
    initEchart_analyse() {
      //告警级别分布
      let chartDom = document.getElementById("main");
      let myChart = echarts.init(chartDom);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      let option;

      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              {
                value: this.RankData.high,
                name: "紧急",
              },
              {
                value: this.RankData.average,
                name: "一般严重",
              },
              {
                value: this.RankData.high,
                name: "严重",
              },
              {
                value: this.RankData.notClassified,
                name: "未分类",
              },
              {
                value: this.RankData.warning,
                name: "警告",
              },
              {
                value: this.RankData.information,
                name: "信息",
              },
              {
                value: this.RankData.disaster,
                name: "灾难",
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);

      //告警趋势
      let chartDom1 = document.getElementById("main2");
      let myChart1 = echarts.init(chartDom1);
      let option1;
      const today = new Date();
      const day = today.getDate();
      const month = today.getMonth() + 1; // 注意要加1，因为月份从0开始计数
      option1 = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["未分类", "信息", "警告", "一般严重", "严重", "灾难"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              month + "-" + (day - 7),
              month + "-" + (day - 6),
              month + "-" + (day - 5),
              month + "-" + (day - 4),
              month + "-" + (day - 3),
              month + "-" + (day - 2),
              month + "-" + (day - 1),
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "未分类",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [
              this.TrendData[6].notClassified,
              this.TrendData[5].notClassified,
              this.TrendData[4].notClassified,
              this.TrendData[3].notClassified,
              this.TrendData[2].notClassified,
              this.TrendData[1].notClassified,
              this.TrendData[0].notClassified,
            ],
          },
          {
            name: "信息",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [
              this.TrendData[6].information,
              this.TrendData[5].information,
              this.TrendData[4].information,
              this.TrendData[3].information,
              this.TrendData[2].information,
              this.TrendData[1].information,
              this.TrendData[0].information,
            ],
          },
          {
            name: "警告",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [
              this.TrendData[6].warning,
              this.TrendData[5].warning,
              this.TrendData[4].warning,
              this.TrendData[3].warning,
              this.TrendData[2].warning,
              this.TrendData[1].warning,
              this.TrendData[0].warning,
            ],
          },
          {
            name: "一般严重",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [
              this.TrendData[6].average,
              this.TrendData[5].average,
              this.TrendData[4].average,
              this.TrendData[3].average,
              this.TrendData[2].average,
              this.TrendData[1].average,
              this.TrendData[0].average,
            ],
          },
          {
            name: "严重",
            type: "line",
            stack: "Total",
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [
              this.TrendData[6].high,
              this.TrendData[5].high,
              this.TrendData[4].high,
              this.TrendData[3].high,
              this.TrendData[2].high,
              this.TrendData[1].high,
              this.TrendData[0].high,
            ],
          },
          {
            name: "灾难",
            type: "line",
            stack: "Total",
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [
              this.TrendData[6].disaster,
              this.TrendData[5].disaster,
              this.TrendData[4].disaster,
              this.TrendData[3].disaster,
              this.TrendData[2].disaster,
              this.TrendData[1].disaster,
              this.TrendData[0].disaster,
            ],
          },
        ],
      };

      option1 && myChart1.setOption(option1);

      //告警分类统计
      // let chartDom2 = document.getElementById('main3');
      // let myChart2 = echarts.init(chartDom2);
      // let option2;

      // option2 = {
      //     tooltip: {
      //         trigger: 'axis',
      //         axisPointer: {
      //             // Use axis to trigger tooltip
      //             type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      //         }
      //     },
      //     legend: {},
      //     grid: {
      //         left: '3%',
      //         right: '4%',
      //         bottom: '3%',
      //         containLabel: true
      //     },
      //     xAxis: {
      //         type: 'category',
      //         data: ['探测', '操作系统', '数据库', '中间件', '网络设备', '服务器', '云平台']
      //     },
      //     yAxis: {
      //         type: 'value'

      //     },
      //     series: [
      //         {
      //             name: '紧急',
      //             type: 'bar',
      //             stack: 'total',
      //             label: {
      //                 show: true
      //             },
      //             emphasis: {
      //                 focus: 'series'
      //             },
      //             data: [320, 302, 301, 334, 390, 330, 320]
      //         },
      //         {
      //             name: '严重',
      //             type: 'bar',
      //             stack: 'total',
      //             label: {
      //                 show: true
      //             },
      //             emphasis: {
      //                 focus: 'series'
      //             },
      //             data: [120, 132, 101, 134, 90, 230, 210]
      //         },
      //         {
      //             name: '次要',
      //             type: 'bar',
      //             stack: 'total',
      //             label: {
      //                 show: true
      //             },
      //             emphasis: {
      //                 focus: 'series'
      //             },
      //             data: [220, 182, 191, 234, 290, 330, 310]
      //         },
      //         {
      //             name: '警告',
      //             type: 'bar',
      //             stack: 'total',
      //             label: {
      //                 show: true
      //             },
      //             emphasis: {
      //                 focus: 'series'
      //             },
      //             data: [150, 212, 201, 154, 190, 330, 410]
      //         },
      //         {
      //             name: '信息',
      //             type: 'bar',
      //             stack: 'total',
      //             label: {
      //                 show: true
      //             },
      //             emphasis: {
      //                 focus: 'series'
      //             },
      //             data: [820, 832, 901, 934, 1290, 1330, 1320]
      //         }
      //     ]
      // };

      // option2 && myChart2.setOption(option2);
    },
    //日报
    initEchart_day() {
      // let chartDom3 = document.getElementById('main4');
      // let myChart3 = echarts.init(chartDom3);
      // let option3;
      // option3 = {
      //     tooltip: {
      //         trigger: 'axis',
      //         axisPointer: {
      //             // Use axis to trigger tooltip
      //             type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      //         }
      //     },
      //     legend: {},
      //     grid: {
      //         left: '3%',
      //         right: '4%',
      //         bottom: '3%',
      //         containLabel: true
      //     },
      //     xAxis: {
      //         type: 'category',
      //         data: ['探测', '操作系统', '数据库', '中间件', '网络设备', '服务器', '云平台']
      //     },
      //     yAxis: {
      //         type: 'value'
      //     },
      //     series: [
      //         {
      //             name: '紧急',
      //             type: 'bar',
      //             stack: 'total',
      //             label: {
      //                 show: true
      //             },
      //             emphasis: {
      //                 focus: 'series'
      //             },
      //             data: [320, 302, 301, 334, 390, 330, 320]
      //         },
      //         {
      //             name: '严重',
      //             type: 'bar',
      //             stack: 'total',
      //             label: {
      //                 show: true
      //             },
      //             emphasis: {
      //                 focus: 'series'
      //             },
      //             data: [120, 132, 101, 134, 90, 230, 210]
      //         },
      //         {
      //             name: '次要',
      //             type: 'bar',
      //             stack: 'total',
      //             label: {
      //                 show: true
      //             },
      //             emphasis: {
      //                 focus: 'series'
      //             },
      //             data: [220, 182, 191, 234, 290, 330, 310]
      //         },
      //         {
      //             name: '警告',
      //             type: 'bar',
      //             stack: 'total',
      //             label: {
      //                 show: true
      //             },
      //             emphasis: {
      //                 focus: 'series'
      //             },
      //             data: [150, 212, 201, 154, 190, 330, 410]
      //         },
      //         {
      //             name: '信息',
      //             type: 'bar',
      //             stack: 'total',
      //             label: {
      //                 show: true
      //             },
      //             emphasis: {
      //                 focus: 'series'
      //             },
      //             data: [820, 832, 901, 934, 1290, 1330, 1320]
      //         }
      //     ]
      // };
      // option3 && myChart3.setOption(option3);
    },
    //周报
    initEchart_week() {
      let chartDom4 = document.getElementById("main5");
      let myChart4 = echarts.init(chartDom4);
      let option4;
      option4 = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["告警总数", "已确认告警", "未确认告警"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            this.timestampToTime(this.reportWeek[6].date),
            this.timestampToTime(this.reportWeek[5].date),
            this.timestampToTime(this.reportWeek[4].date),
            this.timestampToTime(this.reportWeek[3].date),
            this.timestampToTime(this.reportWeek[2].date),
            this.timestampToTime(this.reportWeek[1].date),
            this.timestampToTime(this.reportWeek[0].date),
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "告警总数",
            type: "line",
            stack: "Total",
            data: [
              this.reportWeek[6].total,
              this.reportWeek[5].total,
              this.reportWeek[4].total,
              this.reportWeek[3].total,
              this.reportWeek[2].total,
              this.reportWeek[1].total,
              this.reportWeek[0].total,
            ],
          },
          {
            name: "已确认告警",
            type: "line",
            stack: "Total",
            data: [
              this.reportWeek[6].unConfirm,
              this.reportWeek[5].unConfirm,
              this.reportWeek[4].unConfirm,
              this.reportWeek[3].unConfirm,
              this.reportWeek[2].unConfirm,
              this.reportWeek[1].unConfirm,
              this.reportWeek[0].unConfirm,
            ],
          },
          {
            name: "未确认告警",
            type: "line",
            stack: "Total",
            data: [
              this.reportWeek[6].confirm,
              this.reportWeek[5].confirm,
              this.reportWeek[4].confirm,
              this.reportWeek[3].confirm,
              this.reportWeek[2].confirm,
              this.reportWeek[1].confirm,
              this.reportWeek[0].confirm,
            ],
          },
        ],
      };

      option4 && myChart4.setOption(option4);

      // let chartDom5 = document.getElementById('main6');
      // let myChart5 = echarts.init(chartDom5);
      // let option5;

      // option5 = {
      //     tooltip: {
      //         trigger: 'axis',
      //         axisPointer: {
      //             // Use axis to trigger tooltip
      //             type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      //         }
      //     },
      //     legend: {},
      //     grid: {
      //         left: '3%',
      //         right: '4%',
      //         bottom: '3%',
      //         containLabel: true
      //     },
      //     xAxis: {
      //         type: 'category',
      //         data: ['探测', '操作系统', '数据库', '中间件', '网络设备', '服务器', '云平台']
      //     },
      //     yAxis: {
      //         type: 'value'

      //     },
      //     series: [
      //         {
      //             name: '紧急',
      //             type: 'bar',
      //             stack: 'total',
      //             label: {
      //                 show: true
      //             },
      //             emphasis: {
      //                 focus: 'series'
      //             },
      //             data: [320, 302, 301, 334, 390, 330, 320]
      //         },
      //         {
      //             name: '严重',
      //             type: 'bar',
      //             stack: 'total',
      //             label: {
      //                 show: true
      //             },
      //             emphasis: {
      //                 focus: 'series'
      //             },
      //             data: [120, 132, 101, 134, 90, 230, 210]
      //         },
      //         {
      //             name: '次要',
      //             type: 'bar',
      //             stack: 'total',
      //             label: {
      //                 show: true
      //             },
      //             emphasis: {
      //                 focus: 'series'
      //             },
      //             data: [220, 182, 191, 234, 290, 330, 310]
      //         },
      //         {
      //             name: '警告',
      //             type: 'bar',
      //             stack: 'total',
      //             label: {
      //                 show: true
      //             },
      //             emphasis: {
      //                 focus: 'series'
      //             },
      //             data: [150, 212, 201, 154, 190, 330, 410]
      //         },
      //         {
      //             name: '信息',
      //             type: 'bar',
      //             stack: 'total',
      //             label: {
      //                 show: true
      //             },
      //             emphasis: {
      //                 focus: 'series'
      //             },
      //             data: [820, 832, 901, 934, 1290, 1330, 1320]
      //         }
      //     ]
      // };

      // option5 && myChart5.setOption(option5);
    },
    //月报
    initEchart_month() {
      // let chartDom6 = document.getElementById('main7');
      // let myChart6 = echarts.init(chartDom6);
      // let option6;
      // option6 = {
      //     tooltip: {
      //         trigger: 'axis'
      //     },
      //     legend: {
      //         data: ['告警总数', '未关闭告警', '已关闭告警',]
      //     },
      //     grid: {
      //         left: '3%',
      //         right: '4%',
      //         bottom: '3%',
      //         containLabel: true
      //     },
      //     toolbox: {
      //         feature: {
      //             saveAsImage: {}
      //         }
      //     },
      //     xAxis: {
      //         type: 'category',
      //         boundaryGap: false,
      //         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      //     },
      //     yAxis: {
      //         type: 'value'
      //     },
      //     series: [
      //         {
      //             name: '告警总数',
      //             type: 'line',
      //             stack: 'Total',
      //             data: [120, 132, 101, 134, 90, 230, 210]
      //         },
      //         {
      //             name: '未关闭告警',
      //             type: 'line',
      //             stack: 'Total',
      //             data: [220, 182, 191, 234, 290, 330, 310]
      //         },
      //         {
      //             name: '已关闭告警',
      //             type: 'line',
      //             stack: 'Total',
      //             data: [150, 232, 201, 154, 190, 330, 410]
      //         }
      //     ]
      // };
      // option6 && myChart6.setOption(option6);
      // let chartDom7 = document.getElementById('main8');
      // let myChart7 = echarts.init(chartDom7);
      // let option7;
      // option7 = {
      //     tooltip: {
      //         trigger: 'axis',
      //         axisPointer: {
      //             // Use axis to trigger tooltip
      //             type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      //         }
      //     },
      //     legend: {},
      //     grid: {
      //         left: '3%',
      //         right: '4%',
      //         bottom: '3%',
      //         containLabel: true
      //     },
      //     xAxis: {
      //         type: 'category',
      //         data: ['探测', '操作系统', '数据库', '中间件', '网络设备', '服务器', '云平台']
      //     },
      //     yAxis: {
      //         type: 'value'
      //     },
      //     series: [
      //         {
      //             name: '紧急',
      //             type: 'bar',
      //             stack: 'total',
      //             label: {
      //                 show: true
      //             },
      //             emphasis: {
      //                 focus: 'series'
      //             },
      //             data: [320, 302, 301, 334, 390, 330, 320]
      //         },
      //         {
      //             name: '严重',
      //             type: 'bar',
      //             stack: 'total',
      //             label: {
      //                 show: true
      //             },
      //             emphasis: {
      //                 focus: 'series'
      //             },
      //             data: [120, 132, 101, 134, 90, 230, 210]
      //         },
      //         {
      //             name: '次要',
      //             type: 'bar',
      //             stack: 'total',
      //             label: {
      //                 show: true
      //             },
      //             emphasis: {
      //                 focus: 'series'
      //             },
      //             data: [220, 182, 191, 234, 290, 330, 310]
      //         },
      //         {
      //             name: '警告',
      //             type: 'bar',
      //             stack: 'total',
      //             label: {
      //                 show: true
      //             },
      //             emphasis: {
      //                 focus: 'series'
      //             },
      //             data: [150, 212, 201, 154, 190, 330, 410]
      //         },
      //         {
      //             name: '信息',
      //             type: 'bar',
      //             stack: 'total',
      //             label: {
      //                 show: true
      //             },
      //             emphasis: {
      //                 focus: 'series'
      //             },
      //             data: [820, 832, 901, 934, 1290, 1330, 1320]
      //         }
      //     ]
      // };
      // option7 && myChart7.setOption(option7);
    },
    //获取数据
    getList() {
      Promise.allSettled([
        getAlertClassifyApi(),
        getRankApi(),
        getTrendApi(),
      ]).then((responses) => {
        // console.log(responses);
        this.AlertClassifyData = responses[0].value.data;
        this.RankData = responses[1].value.data;
        this.TrendData = responses[2].value.data;
        this.initEchart_analyse();
      });
    },
    //获取日报月报周报数据
    async getDataPresentationDate() {
      let res = await getDataPresentationDateApi({ flag: this.flag });
      let { code, data } = res;
      if (code == 200) {
        if (this.flag == 0) {
          this.reportDay = data;
        } else if (this.flag == 1) {
          this.reportWeek = data;
          this.initEchart_week();
        } else if (this.flag == 2) {
          this.reportMonth = data;
          this.initEchart_month();
        }
      }
    },
    //触发器top10
    async getTop() {
      let res = await getTopApi({ flag: this.flag });
      let { code, data } = res;
      if (code == 200) {
        if (this.flag == 0) {
          this.topDay = data;
        } else if (this.flag == 1) {
          this.topWeek = data;
        } else if (this.flag == 2) {
          this.topMonth = data;
        }
      }
    },
    //对象告警top10
    async getAlarmTop() {
      let res = await getAlarmTopApi({
        flag: this.flag,
      });
      let { code, data } = res;
      if (code == 200) {
        this.alarmTop = data;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.functional_zone {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

::v-deep .el-tabs__content {
  height: calc(100vh - 170px);
  overflow-y: scroll;
}

/* 分析 */
.analyse {
  .row {
    margin: 10px 0;

    .item {
      width: 100%;
      display: flex;
      justify-content: space-around;

      ::v-deep .el-card__body {
        cursor: pointer;
        width: 100%;
        justify-content: center;
        display: flex;
        align-items: center;
      }

      .num {
        text-align: center;
        margin-top: 10px;
        font-size: 16px;
      }

      .img {
        width: 64px;
        height: 64px;
      }
    }
  }

  .analyse_center {
    margin: 15px 0;
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: space-between;
    // background-color: #ccc;

    .left {
      width: 40%;

      #main {
        width: 100%;
        height: 300px;
      }
    }

    .right {
      width: 59%;

      #main2 {
        width: 100%;
        height: 300px;
      }
    }
  }

  .analyse_bottom {
    #main3 {
      width: 100%;
      height: 500px;
    }
  }
}

/* 日报 */
.day {
  .day_top {
    display: flex;
    justify-content: space-between;

    .ProgressBar {
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .day_item {
        width: 33%;

        .total {
          color: #aab2c8;
        }
      }
    }

    .type {
      width: 100%;
      height: 300px;
    }
  }

  .day_cener {
    .top5 {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    p {
      border: 1px solid #ccc;
      border-top: none;
      line-height: 30px;
      padding: 5px;
      box-sizing: border-box;
      position: relative;

      .num {
        background-color: #518bff;
        padding: 5px 10px;
        color: #fff;
        border-radius: 10px;
      }

      .percentage {
        position: absolute;
        right: 10px;
      }
    }

    .top_title {
      border-top: 1px solid #ccc;
      background-color: #f6f9ff;
    }
  }
}

/* 周报 */
.week {
  .week_top {
    display: flex;
    justify-content: space-between;

    #main5 {
      width: 100%;
      height: 300px;
    }

    #main6 {
      width: 100%;
      height: 300px;
    }
  }
}

/* 月报 */
.month {
  .month_top {
    display: flex;
    justify-content: space-between;

    .ProgressBar {
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .day_item {
        width: 33%;

        .total {
          color: #aab2c8;
        }
      }
    }

    // #main7 {
    //     width: 100%;
    //     height: 300px;

    // }

    #main8 {
      width: 100%;
      height: 300px;
    }
  }
}
</style>